<template>
    <div id="registr">
        <head-top>
            <h1 slot="title" >注册</h1>
        </head-top>
        <div class="container">
            <c-form :model="registr" class="form-login block form-horizontal">
                <div   class="item form-item clearfix">
                    <div class="form-item-label fl">
                        <label >用户名:</label>
                    </div>
                    <div class="form-item-control-wrapper fl">
                        <div class="form-item-control">
                            <c-input
                                    class="input"
                                    ref="username"
                                    name="username"
                                    v-model="registr.username.def"
                                    @validate="submitValidate"
                                    placeholder="用户名啊"
                                    rules='[
                                    { "type":"required", "msg": "用户名不能为空" },
                                    { "type":"username","msg":"请填写正确的用户名"},
                                    { "type":"usernamepost","msg":"用户名重复","async":true}
                                    ]'
                            ></c-input>
                        </div>
                        <div class="form-item-error" v-if="registr.username.error != ''">{{registr.username.error}}</div>
                    </div>
                </div>
                <div   class="item form-item clearfix">
                    <div class="form-item-label fl">
                        <label >手机号:</label>
                    </div>
                    <div class="form-item-control-wrapper fl">
                        <div class="form-item-control">
                            <c-input
                                    class="input"
                                    ref="mobile"
                                    name="mobile"
                                    v-model="registr.mobile.def"
                                    @validate="submitValidate"
                                    placeholder="填写手机号码"
                                    rules='[
                                    { "type":"mobile","msg":"请填写正确的手机号码"}
                                    ]'
                            ></c-input>
                        </div>
                        <div class="form-item-error" v-if="registr.mobile.error != ''">{{registr.mobile.error}}</div>
                    </div>
                </div>
                <div   class="item form-item clearfix">
                    <div class="form-item-label fl">
                        <label >验证码:</label>
                    </div>
                    <div class="form-item-control-wrapper fl">
                        <div class="form-item-control">
                            <c-input
                                    class="input auth-code"
                                    ref="code"
                                    name="code"
                                    v-model="registr.code.def"
                                    @validate="submitValidate"
                                    placeholder="填写验证码"
                                    rules='[
                                    { "type":"required", "msg": "验证码不能为空" },
                                    { "type":"code","msg":"请填写正确的验证码"}
                                    ]'
                            ></c-input>
                            <div class="btn btn-code">获取验证码</div>
                        </div>
                        <div class="form-item-error" v-if="registr.code.error != ''">{{registr.code.error}}</div>
                    </div>
                </div>
                <div class="item form-item  clearfix">
                    <div class="form-item-label fl">
                        <label >密码:</label>
                    </div>
                    <div class="form-item-control-wrapper fl">
                        <div class="form-item-control">
                            <c-input
                                    class="input "
                                    ref="password"
                                    name="password"
                                    v-model="registr.password.def"
                                    @validate="submitValidate"
                                    placeholder="填写密码"
                                    rules='[
                                    { "type":"required", "msg": "密码不能为空" }
                                    ]'
                            ></c-input>
                        </div>
                        <div class="form-item-error" v-if="registr.password.error != ''">{{registr.password.error}}</div>
                    </div>
                </div>
                <div class="item form-item  clearfix">
                    <div class="form-item-label fl">
                        <label >确认密码:</label>
                    </div>
                    <div class="form-item-control-wrapper fl">
                        <div class="form-item-control">
                            <c-input
                                    class="input "
                                    ref="password2"
                                    name="password2"
                                    v-model="registr.password2.def"
                                    @validate="submitValidate"
                                    placeholder="填写密码"
                                    rules='[
                                    { "type":"required", "msg": "密码不能为空" }
                                    ]'
                            ></c-input>
                        </div>
                        <div class="form-item-error" v-if="registr.password2.error != ''">{{registr.password2.error}}</div>
                    </div>
                </div>
            </c-form>
            {{registr.username}}
            <div @click="registrSubmit" class="btn btn-registr ">注册</div>
            {{this.isSubmits}}
        </div>
        <foot-menu></foot-menu>
    </div>
</template>
<style lang="scss" scoped>

    .form-login{
        margin-top:3rem;
        padding:0.5rem 0;

        .auth-code{
            width: 65%;
        }
        .btn-code{
            background-color: #1db208;
            color: #ffffff;
            border-radius: 0.2rem;
        }
        .form-item{
            padding:0.5rem 0.5rem 0.5rem 0;
            border-bottom: none;
                .form-item-label{
                    text-align: right;
                    box-sizing: border-box;
                    padding-right:0.3rem;
                    label{
                        font-weight: bold;
                    }
                }
            .form-item-control-wrapper{
                width: 75%;
            }
        }

    }
    .btn-registr{
        display: block;
        background-color: #6bd968;
        color: #ffffff;
        text-align: center;
        line-height: 1.5rem;
        font-size: 0.8rem;
        margin: 1rem 1rem 0.6rem;
    }


</style>
<script>
    import headTop from '../../components/header/headTop'
    import footMenu from '../../components/footer/footMenu.vue'
    import CInput from '../../components/forms/src/cinput.vue'
    import CForm from '../../components/forms/src/cform.vue'
    import  RegExps  from '../../lib/RegExps';
    import  minNotice  from '../../components/minNotice';
    export default{
        data() {
            return {
               registr:{
                   username:"",
                   mobile:"",
                   code:"",
                   password:"",
                   password2:""
               },
               isSubmit:false
            }
        },
        components: {
            headTop,
            footMenu,
            CInput,
            CForm
        },
        computed:{
            isSubmits(){
                const {username,mobile,code,password,password2}= this.registr
               return  (username.pass) && (mobile.pass) &&(code.pass) &&(password.pass) &&(password2.pass)
            }
        },
        watch:{
           /* registr:{
                handler: function (val, oldVal) {
                    console.log(val)
                    if(new RegExp(reg.empty).test(val.username.def)){
//                        val.username.error = "用户名不能为空";
                        console.log("用户名不能为空")
                        val.username=Object.assign({},val.username,{error:"用户名不能为空"})
                       } else {
                        val.username.error = ""
                    }

                    if(new RegExp(reg.empty).test(val.phone.def)){
                        val.phone.error = "手机号码不能为空";
                       } else {
                        val.phone.error = ""
                    }
                },
                deep: true
            }*/
        },
        methods:{
            submitValidate(o){
                this.registr[o.n].pass =o.p
                if(o.p){
                    this.registr[o.n].error =""
                }else {
                    this.registr[o.n].error =o.m
                }

            },
            registrSubmit(){
                const {username,mobile,code,password,password2}=this.$refs;
                console.log("~~~~~~registrSubmit~~~~~~~~~")
                console.log(this.isSubmits)

                console.log("~~~~~~registrSubmit~~~~~~~~~")


            }
        }
    }
</script>